src/app/video/[animeId]/page.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

"use client"

import '../video.css'
import React, { useState, useEffect } from 'react';
import ReactPlayer from 'react-player';

export default function Video({ params }) {
    const id = params.animeId;
    const [videoLink, setVideoLink] = useState(null);
    const [loading, setLoading] = useState(true);
	const [epi, setEpi] = useState("");


    useEffect(() => {
        fetch("https://anime-sensei-api.vercel.app/anime/gogoanime/watch/" + id)
            .then(res => res.json())
            .then(data => {
				const words = id.split("-")
				const last_two = words.slice(-2).join(" ");
				const remainingWords = words.slice(0, -2).join(" ");
				setEpi([last_two, remainingWords])
                setVideoLink(data.sources[3].url);
                setLoading(false);
            })
            .catch(error => {
                console.log("Some error occured", error);
                setLoading(false);
            });
    }, [id]);

    return (
        <div>
            {loading && (
                <p style={{color: "white", fontFamily: "Lato", fontSize: "20px", textAlign: "center"}}>Loading...</p>
            )}
			{videoLink && (
				<div className='video2'>
					<p>{epi[0]} - {epi[1]}</p>
					<ReactPlayer 
                        className='react-player'
						url={videoLink}
						controls
						autoplay
						width="95%"
                        height="95%"
					/>
				</div>
			)}
        </div>
    );
}